<template>
  <view>
    <view class="components-title">
      <view class="components-title-t">gg-draw-posters</view>
      <view class="components-title-d">绘制海报</view>
    </view>
    <gg-draw-posters :postersData="postersData" @success="onSuccessCreatePosters" @error="onPostersError" />

    <!-- 仅为生成二维码使用 -->
    <gg-draw-qrcode style="height:0;overflow: hidden;" :val="code" :onval="true" icon="/static/logo.png" loadMake @result="onResult" />
    <view style="text-align:center;">
      <image :src="posterImg.path" v-bind:style="'width:'+postersData.width/3+'px;'+'height:'+postersData.height/3+'px;'" />
    </view>
    <gg-input-text label="邀请码" :labelWidth="100" v-model="code" />
    <gg-input-text label="二维码大小" :labelWidth="100" v-model="qrcode.width" />
    <gg-input-text label="二维码左边距" :labelWidth="100" v-model="qrcode.left" />
    <gg-input-text label="二维码上边距" :labelWidth="100" v-model="qrcode.top" />
    <gg-button label="生成" type="save" @tap="initPostersConfig" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      postersData: {},
      posterImg: {},
      code: 'LSKDGHKJH',
      qrcode: { width: 280, top: 965, left: 275, },
    };
  },
  onLoad() {
  },
  methods: {
    initPostersConfig() {
      const config = {
        clear: true,
        width: 830,
        height: 1435,
        background: '#ffffff',
        views: [
          {
            type: 'image',
            width: 830,
            height: 1435,
            top: 0,
            left: 0,
            // 封面图，测试的时候填上
            url: '/static/images/posters-background.png'
          },
          {
            type: 'text',
            width: 400,
            height: 50,
            left: 345,
            top: 1348,
            fontSize: 24,
            lineHeight: 40,
            bolder: true,
            breakWord: true,
            content: this.code,
            color: '#000000',
            MaxLineNumber: 2
          },
          {
            type: 'image',
            width: parseInt(this.qrcode.width),
            height: parseInt(this.qrcode.width),
            top: parseInt(this.qrcode.top),
            left: parseInt(this.qrcode.left),
            // 二维码图片路径，测试的时候填上
            url: this.qrcode.url || '/static/goods_list/face.jpg'
          },
        ]
      };
      this.$set(this, 'postersData', config)
      console.log({ ...this.postersData })
    },
    onSuccessCreatePosters(res) {
      console.log(res)
      this.$set(this, 'posterImg', res)
    },
    onPostersError(res) {
      console.log(res)
    },
    onResult(e) {
      this.qrcode.url = e
      this.initPostersConfig();
    }
  }
}
</script>